# Multi-step Actions

<EpicVideo url="https://www.epicreact.dev/workshops/react-suspense/multi-step-actions" />

👨‍💼 Our submit button changes from "Create" to "Creating..." but our form action
actually has one more step: loading the newly created ship.

We want to update the message of our submit button to indicate which step we're
on in the process. But updating state during a transition (like that in our form
action) isn't possible. So we need to use `useOptimistic`. Here's an example of
how you might do this:

```tsx
<form
	action={async (formData) => {
		setMessage('Creating order...')
		const order = await createOrder(formData)
		setMessage('Creating payment...')
		const payment = await createPayment(formData, order)
		setMessage('Almost done!')
		await sendThankYou(order, payment)
	}}
>
	{/* ...*/}
</form>
```

So please add a `useOptimistic` for a "message" variable which we'll use to
update the submit button message. You can initialize it to "Create" and then
update it in each step of our form action.
